<template>
  <div>
    <!-- <Top :list="list" :columns="tableColumns" :childev="setchil"></Top> -->
    <div style="width: 100%; height: 100%; display: flex">
      <div
        style="
          width: 18%;
          height: 580px;
          border: 1px solid #ccc;
          margin: 0px 5px 0 5px;
          box-sizing: border-box;
          position: relative;
        "
      >
        <div class="left_div">
          <div><b>物品分类</b></div>
          <div><b>序号</b></div>
        </div>
        <div v-for="(item, index) in options" :key="index">
          <div class="left_div">
            <div>
              <el-icon><FolderOpened /></el-icon>&nbsp;{{ item.value }}
            </div>
            <div>{{ item.label }}</div>
          </div>
          <div v-if="item.children.length > 0">
            <div
              class="left_div"
              v-for="(item2, index2) in item.children"
              :key="index2"
            >
              <div>
                &nbsp;&nbsp;&nbsp;&nbsp;<el-icon><FolderRemove /></el-icon
                >&nbsp;{{ item2.value }}
              </div>
              <div>{{ item2.label }}</div>
            </div>
          </div>
        </div>
        <div class="bottom_div">
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Plus /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Edit /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Delete /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><RefreshLeft /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Rank /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Top /></el-icon>
          </div>
          <div>
            <el-icon color="rgb(66,139,202)" size="18"><Search /></el-icon>
          </div>
        </div>
      </div>
      <div style="width: 82%">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div
            style="width: 40%; display: flex; justify-content: space-between"
          >
            <el-button type="primary" color="rgb(66,139,202)"
              ><b>+新增</b></el-button
            >
            <el-input
              v-model="input"
              style="width: 40%; height: 30px"
              placeholder="关键字"
            ></el-input>
            <el-button>搜索</el-button>

            <el-button-group>
              <el-button>入库</el-button>
              <el-button>出库</el-button>
            </el-button-group>
          </div>
          <div style="padding: 10px 0 10px 0">
            <el-button>导入</el-button>
            <el-button>导出</el-button>
            <el-button>刷新库存</el-button>
            <el-button type="danger"
              ><el-icon color="#fff"><Delete /></el-icon>删除</el-button
            >
            <el-button type="info"
              ><el-icon color="#fff"><Edit /></el-icon>编辑</el-button
            >
          </div>
        </div>
        <Table
          :list="showlist"
          :columns="tableColumns"
          :page="page"
          :pageSize="pageSize"
          :lodding="lodding"
        ></Table>
        <Page
          :page="page"
          :pageSize="pageSize"
          :list="list"
          :lists="list.length"
          :total="Math.ceil(list.length / pageSize)"
          :sha="sha"
          :xia="xia"
          :load="load"
          :setpageSize="setpageSize"
          :setlodding="setlodding"
        ></Page>
      </div>
    </div>
  </div>
</template>
    
<script setup>
// import Top from "../component/top.vue";
import Table from "../component/table.vue";
import Page from "../component/pages.vue";
import {
  FolderOpened,
  FolderRemove,
  Plus,
  RefreshLeft,
  Rank,
  Top,
  Search,
  Edit,
  Delete,
} from "@element-plus/icons-vue";
import { ref, reactive, onMounted, computed } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const list = ref([]);
const tableColumns = ref([
  { feg: true, key: "serial", label: "编号" },
  { feg: true, key: "name", label: "名称" },
  { feg: true, key: "type", label: "分类" },
  { feg: true, key: "price", label: "单价" },
  { feg: true, key: "unit", label: "单位" },
  { feg: true, key: "specification", label: "规格" },
  { feg: true, key: "model", label: "型号" },
  { feg: true, key: "repertory", label: "总库存" },
  { feg: true, key: "_id", label: "ID" },
]);
const options = [
  {
    value: "互联网",
    label: "0",
    children: [
      {
        value: "OA",
        label: "0",
      },
      {
        value: "CSP",
        label: "0",
      },
    ],
  },
  {
    value: "办公耗材",
    label: "0",
    children: [
      {
        value: "显示器",
        label: "0",
      },
      {
        value: "鼠标",
        label: "0",
      },
      {
        value: "主机",
        label: "0",
      },
      {
        value: "笔",
        label: "0",
      },
    ],
  },
];
const page = ref(1);
const pageSize = ref(2);
const lodding = ref(false);

onMounted(async () => {
  const res = await axios.get("http://127.0.0.1:3000/admin/get_goods");
  list.value = res.data.data;
  console.log(list.value);
});

const setchil = (setcolumn) => {
  setcolumn.forEach((item, index) => {
    tableColumns.value[index].feg = item.feg;
  });
};

const sha = (i) => {
  console.log(i);
  if (i != -1 || i == list.value.length + 1) {
    page.value = i;
  } else {
    page.value--;
  }
};
const xia = () => {
  page.value++;
};

const load = (row) => {
  page.value = row;
};

const setpageSize = (i) => {
  pageSize.value = i;
};

const showlist = computed(() => {
  let start = (page.value - 1) * pageSize.value;
  let end = page.value * pageSize.value;
  return list.value.slice(start, end);
});

const setlodding = () => {
  lodding.value = true;
  setTimeout(() => {
    lodding.value = false;
  }, 100);
};


</script>
    
<style>
@import url(../style/zcss.css);
</style>